/**
 * Created by mac on 2017/7/18.
 */
/**
 * Created by mac on 2017/7/12.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    FlatList,
    TouchableOpacity,
    DeviceEventEmitter
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

let width = Dimensions.get('window').width;

let count = 0;

let leftData= [];

let rightData=[];

import SectionBar from './SectionBar';

export default class CommentPros extends Component {


    renderItem(item,i){

        let pic = '';
        if (item.tags.length>0){
            pic =item.tags[0].pic;
        }

        return(
            <View key={i} style={{width:(width - 5) /2,
                backgroundColor:'white'
            }}>
                <CachedImage
                    style={{width: (width - 5) / 2, height: (width - 5) / 2}}
                    source={{uri: item.pic}}/>
                <CachedImage style={{width:50,height:50,position:'absolute',left:2,top:2}} source={{uri:pic}}/>
                <View style={{paddingLeft:5,paddingTop:5,height:70}}>
                    <Text>{item.alias}</Text>
                    <Text style={{fontSize:12,color:'gray',paddingTop:5}}>{item.name}</Text>
                    <Text style={{color:'red',flexDirection:'row',paddingTop:5}}>
                        {item.salesPrice.toFixed(2)+'  '}
                        <Text style={{paddingBottom:0,fontSize:10, textDecorationLine:'line-through',color:'gray'}}>{item.marketPrice.toFixed(2)}</Text>
                    </Text>
                    <TouchableOpacity onPress={(e)=>{

                        console.log('onpress='+e.nativeEvent.pageX);
                        console.log('onpress='+e.nativeEvent.pageY);
                        console.log('onpress='+e.nativeEvent.locationX);
                        console.log('onpress='+e.nativeEvent.locationY);

                        let point = {
                            x:e.nativeEvent.pageX-e.nativeEvent.locationX,
                            y:e.nativeEvent.pageY-e.nativeEvent.locationY
                        }

                      //  DeviceEventEmitter.emit('ClickCart',point);

                        this.props.clickCart(point);

                    }} style={{position:'absolute',bottom:10,right:10}}>
                        <Image source={require('./images/icon-add-to-cart-green.png')} style={{width:37*0.7,height:33*0.7}}/>
                    </TouchableOpacity>
                </View>
                <View style={{width:(width - 5) / 2,height:1,backgroundColor:'lightgray',}}/>
                <Text numberOfLines={3} style={{marginTop:5,paddingLeft:5,fontSize:12,width:(width - 5) / 2,minHeight:20}}>
                    <Text style={{fontSize:12,color:'#66b219'}}>主人说:</Text>
                    {item.remarks}
                </Text>
                <View  style={{paddingTop:5,width:(width - 5) / 2,height:5,backgroundColor:'lightgray'}}/>
            </View>


        )
    }



    render() {

        let _this = this;

        console.log('data='+_this.props.data);
        if(_this.props.data.length === 0){
            return(
                <View/>
            )
        }



        if (leftData.length > 0){

            leftData.splice(0,leftData.length)
            rightData.splice(0,rightData.length)

        }
        _this.props.data.data.items.map(function (item,i) {

            if(i%2 == 0) {
                leftData.push(item);
            }
            else {
                rightData.push(item);
            }
        })


        console.log('leftData='+leftData.length);


        return (
            <View
                style={{backgroundColor:'lightgray',width: width,flexDirection:'row'}} ref={(e)=>this.view=e}
            >
                <FlatList style={{flex:1,width:(width - 5) / 2}}
                          contentContainerStyle={{flex:1}}
                          data={leftData}
                          renderItem={({item,index}) =>{

                              return(
                              _this.renderItem(item,index)
                              )
                          }}
                />
                <FlatList style={{flex:1,width:(width - 5) / 2}}
                          contentContainerStyle={{flex:1}}
                          data={rightData}
                          renderItem={({item,index}) =>{
                              return(
                                  _this.renderItem(item,index)
                              )
                          }}
                />

            </View>
        )

    }
}